<template>
    <div>
        <div class="areaNav"><span class="area_nav_tab" :class="{area_nav_tab_active:tabShow}" @click="changeTab(0)">商圈</span><span class="area_nav_tab" :class="{area_nav_tab_active:!tabShow}" @click="changeTab(1)">地铁站</span></div>
        <div class="tab_box">
            <!-- 行政区 -->
             <template v-if="tabShow">
                <div class="district_list">
                    <div class="district_item" v-for="(item,index) in filterCinemas.district.subItems" :key="item.id" :class="{checked:districtIndex == index}" @click="checkDistrict(index)">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}<i class="el-icon-arrow-right right"></i></span>
                    </div>
                </div>
            </template>
            <!-- 地铁 -->
             <template v-if="!tabShow">
                <div class="district_list">
                    <div class="district_item" v-for="(item,index) in filterCinemas.subway.subItems" :key="item.id" :class="{checked:subwayIndex == index}" @click="checkSubway(index)">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}<i class="el-icon-arrow-right right"></i></span>
                    </div>
                </div>
            </template>

            <div class="area_list_box">
                <!-- 行政区 -->
                <template v-if="tabShow">
                    <div class="area_list" v-for="(item,index1) in brandList" :key="index1" :data="index1" v-if="areaListIndex == index1" >
                        <template v-if="item">
                            <div class="area_item" v-for="(items,index2) in item" :key="index2"  @click="changeDistrict(items,index1,index2)" >
                                <span :class="{checked2:areaIndex == index2}" >{{items.name}}</span>
                                <span>{{items.count}}</span>
                            </div>
                        </template>
                        <div v-else></div>
                    </div>
                </template>
                <!-- 地铁 -->
                <template v-if="!tabShow">
                    <div class="area_list" v-for="(item,index1) in subwayList" :key="index1" :data="index1" v-if="stationListIndex == index1" >
                        <template v-if="item">
                            <div class="area_item" v-for="(items,index2) in item" :key="index2" @click="changeStation(items,index1,index2)" >
                                <span :class="{checked2:stationIndex == index2}">{{items.name}}</span>
                                <span>{{items.count}}</span>
                            </div>
                        </template>
                        <div v-else></div>
                    </div>
                </template>
           </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tabShow: true,
      brandList: [],
      subwayList: [],

      districtIndex: 0,
      areaListIndex: 0,
      areaIndex: 0,

      subwayIndex: 0,
      stationListIndex: 0,
      stationIndex: 0

    }
  },
  props: ['filterCinemas'],
  mounted () {
    console.log('地区筛选')
    const tabShow = Number(window.localStorage.tabShow)

    const districtIndex = Number(window.localStorage.districtIndex)
    const areaListIndex = Number(window.localStorage.areaListIndex)
    const areaIndex = Number(window.localStorage.areaIndex)

    const subwayIndex = Number(window.localStorage.subwayIndex)
    const stationListIndex = Number(window.localStorage.stationListIndex)
    const stationIndex = Number(window.localStorage.stationIndex)

    // tab页切换
    this.tabShow = tabShow ? !tabShow : true

    // 行政区选中
    this.districtIndex = districtIndex || 0
    this.areaListIndex = areaListIndex || 0
    this.areaIndex = areaIndex || -1

    // 地铁选中
    this.subwayIndex = subwayIndex || 0
    this.stationListIndex = stationListIndex || 0
    this.stationIndex = stationIndex || -1

    this.brandList = this.filterList(this.filterCinemas.district.subItems)
    this.subwayList = this.filterList(this.filterCinemas.subway.subItems)
  },
  methods: {

    // 筛选二级列表方法
    filterList (_list) {
      let list = []
      if (_list) {
        for (let i = 0; i < _list.length; i++) {
          if (!_list[i]['subItems']) {
            list[i] = ['']
          }
          list[i] = _list[i]['subItems']
        }
      }
      return list
    },

    changeTab (index) {
      this.tabShow = !index
      window.localStorage.setItem('tabShow', index)
    },
    // 行政区域切换
    checkDistrict (index) {
      this.areaIndex = this.districtIndex == index ? this.areaIndex : -1
      this.districtIndex = index
      this.areaListIndex = index

      //  存储本地
      window.localStorage.setItem('districtIndex', index)
      window.localStorage.setItem('areaListIndex', index)
      window.localStorage.setItem('areaIndex', this.areaIndex)

      let list = this.filterCinemas.district.subItems
      if (!list[index].subItems) {
        // console.log(list[index].name,list[index].id)
        this.$emit('change-district', { district: list[index], area: '' })
      }
    },
    changeDistrict (item, index, index2) {
      this.areaIndex = index2
      window.localStorage.setItem('areaIndex', index2)

      let list = this.filterCinemas.district.subItems
      // console.log(list[index].name,list[index].id,item.name,item.id)
      this.$emit('change-district', { district: list[index], area: item })
    },

    // 地铁切换
    checkSubway (index) {
      this.stationIndex = this.subwayIndex == index ? this.stationIndex : -1
      this.subwayIndex = index
      this.stationListIndex = index

      //  存储本地
      window.localStorage.setItem('subwayIndex', index)
      window.localStorage.setItem('stationListIndex', index)
      window.localStorage.setItem('stationIndex', this.stationIndex)

      let list = this.filterCinemas.subway.subItems
      if (!list[index].subItems) {
        // console.log(list[index].name,list[index].id)
        this.$emit('change-subway', { subway: list[index], station: '' })
      }
    },
    changeStation (item, index, index2) {
      this.stationIndex = index2
      window.localStorage.setItem('stationIndex', index2)
      let list = this.filterCinemas.subway.subItems
      // console.log(list[index].name,list[index].id,item.name,item.id)
      this.$emit('change-subway', { subway: list[index], station: item })
    }
  }
}
</script>
<style scoped>
    .areaNav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border-bottom: 1px solid #f2f2f2;
    }
    .areaNav span{
        width: 20%;
        text-align: center;
        line-height: 30px;
        /* padding: 0 15px ; */

    }
    .area_nav_tab{
         border-bottom: 2px solid #fff;
    }
    .area_nav_tab_active{
         border-bottom: 2px solid #F34D41;
    }
    .tab_box{width: 100%;height: 368px;color: #777;display: flex;flex-direction: row;}
    .district_list{width: 36%;height: 100%;flex-shrink: 0;background: #f0f0f0;overflow: auto}
    .district_item{padding: 12px 10px 8px 15px;display: flex;flex-direction: row;justify-content: space-between;}

    .area_list_box{height: 368px;flex-grow: 1;background: #fff;}
    .area_list {height: 100%;overflow: auto}
    .area_item{padding: 12px 10px 8px 15px;display: flex;flex-direction: row;justify-content: space-between;}
    .checked{background: #fff;}
    .checked2{color:#F34D41}
    .right{color: #777;}
</style>
